<!---@page: AI Tool: @/views/aitools/index.vue------>
<template>
  <div class="ai-tools relative w-full">
    <div class="flex h-[40px] w-full items-center px-2">
      <!-- 顶部标签tab -->
      <AiToolTab />
    </div>
    <div class="card mt-2 flex h-[calc(100vh-90px)] overflow-auto p-2">
      <!-- <ToolMain /> -->
      <keep-alive>
        <component :is="toolComponent" :key="toolKey" />
      </keep-alive>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed, markRaw } from 'vue'
  import { emitter } from '@/utils/mitt'
  import AiToolTab from './components/AiToolTab/index.vue'
  import ToolMain from './components/ToolMain/index.vue'
  import Ocr from './components/Ocr/index.vue'
  import Other from './components/Other/index.vue'
  import type { ToolItem } from './components/data'

  const toolMap = {
    ai_tool: markRaw(ToolMain),
    ocr: markRaw(Ocr)
  }
  const toolComponent = ref(null)
  const toolKey = ref('ai_tool')

  emitter.on('openAiTool', (tool: ToolItem) => {
    if (toolMap[tool.key]) {
      toolComponent.value = toolMap[tool.key]
    } else {
      toolComponent.value = markRaw(Other)
    }

    // toolComponent.value = toolMap[tool.key]

    toolKey.value = tool.tabKey
  })

  onMounted(() => {
    toolComponent.value = toolMap.ai_tool
  })
</script>

<style scoped lang="scss"></style>
